
<template>
	<view class="goods-container">
		<view class="goods-box" v-for="(item, index) in goodsList" :key="index">
			<navigator v-if="item" hover-class="none" :url="'/pages/goods/goods-detail/index?id=' + item.id">
				<view class="img-box">
					<image :src="item.picUrls[0] ? item.picUrls[0] : '/static/public/img/no_pic.png'"></image>
				</view>
				<view class="text-black text-df margin-top-xs padding-lr-sm overflow-1">{{item.name}}</view>
				<view class="margin-top-xs text-sm text-gray padding-left-sm overflow-1">{{item.sellPoint}}</view>
				<view class="flex margin-top-xs align-center padding-lr-sm">
					<view class="cu-tag bg-orange radius sm margin-right-xs" v-if="item.freightTemplat&&item.freightTemplat.type == '2'">包邮</view>
					<view class="cu-tag line-orange radius sm margin-right-xs" v-if="item.pointsGiveSwitch == '1'">积分</view>
					<view class="text-gray text-sm">已售{{item.saleNum}}</view>
				</view>
				<view class="text-price text-bold text-scarlet text-xl padding-lr-sm margin-top-xs">{{item.priceDown}}</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},

		components: {},
		props: {
			goodsList: {
				type: Array,
				default: () => []
			}
		},
		methods: {}
	};
</script>
<style>
	.goods-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		box-sizing: content-box;
		margin: 0 -10rpx;
	}

	.goods-box {
		/* width: 344rpx; */
		margin: 10rpx;
		height: 550rpx;
		background-color: #fff;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.goods-box .img-box {
		width: 100%;
		height: 348rpx;
		overflow: hidden;
	}

	.goods-box .img-box image {
		width: 100%;
		height: 348rpx;
	}
</style>
